<template>
  <transition :duration="{ enter: 5000, leave: 8000 }" name="message-fade">
    <v-alert v-show="visible" border="left" elevation="12" colored-border class="message" :color="color">{{ message }}</v-alert>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      id: 0,
      visible: false,
      duration: 5000,
      message: '',
      timer: null,
      closed: false,
      color: ''
    }
  },
  watch: {
    closed(val) {
      if (val) {
        this.visible = false
        this.$el.addEventListener('transitionend', this.destoryElement)
      }
    }
  },
  mounted() {
    this.startTimer()
  },
  methods: {
    destoryElement() {
      this.$el.removeEventListener('transitionend', this.destoryElement)
      this.$destroy(true)
      this.$el.parentNode.removeChild(this.$el)
    },
    startTimer() {
      if (this.duration > 0) {
        this.timer = setTimeout(() => {
          if (!this.closed) {
            this.close()
          }
        }, this.duration)
      }
    },
    close() {
      this.closed = true
    }
  }
}
</script>

<style lang="scss" scoped>
.message {
  transition: opacity .4s transform 1s;
  &.message-fade-enter {
    opacity: 0;
    transform: translate(0, -100%);
  }
  &.message-fade-leave-active {
    opacity: 0;
    transform: translate(0, -100%);
  }
}
</style>
